@use 'sass:map';
@use 'sass:math';

html.dark {
  --card-bg: #333;
  $el-bg: #333;

  $colors: (
          'white': #ffffff,
          'black': #000000,
          'primary': #066e43, // 暗色主题的主色
          'success': #67c23a,
          'warning': #e6a23c,
          'danger': #f56c6c,
          'error': #f56c6c,
          'info': #909399,
    // 新增的颜色
          'neutral': #9ca3af, // 中性蓝
          'mint': #50d2a0,    // 薄荷绿
          'violet': #a29bfe,  // 紫罗兰
          'rose': #fe6c61,    // 玫瑰红
          'gold': #f9bc01,    // 金色
          'teal': #48c072,    // 蓝绿色
          'indigo': #667eea,  // 靛蓝
          'cyan': #17a2b8,    // 青色
          'orange': #fd7e14,  // 橙色
          'pink': #f3a4b5,    // 粉红色
          'lavender': #e6e6fa, // 薰衣草紫
          'turquoise': #40e0d0, // 绿松石色
          'salmon': #ff8c69,   // 鲑鱼色
          'plum': #dda0dd,    // 李子色
          'lime': #cddc39,    // 石灰绿
          'beige': #f5f5dc,   // 米色
          'maroon': #800000,  // 栗色
          'azure': #007fff,   // 天蓝色
          'chartreuse': #7fff00, // 查特酒绿
          'coral': #ff7f50,    // 珊瑚色
          'tan': #d2b48c,     // 棕褐色
          'thistle': #d8bfd8,  // 蓟色
          'wheat': #f5deb3,    // 小麦色
          'olive': #808000,   // 橄榄绿
          'navy': #000080,    // 海军蓝
          'silver': #c0c0c0,   // 银色
          'gray': #808080,     // 灰色
          'dimgray': #696969,  // 深灰色
          'lightgray': #d3d3d3, // 浅灰色
          'midnightblue': #191970, // 午夜蓝
          'springgreen': #00ff7f,  // 春绿色
          'seagreen': #2e8b57,     // 海洋绿
          'slateblue': #6a5acd,    // 板岩蓝
          'slategray': #708090,    // 板岩灰
          'steelblue': #4682b4,     // 钢蓝色
          'royalblue': #4169e1,     // 皇家蓝
          'deeppink': #ff1493,     // 深粉红色
          'deepskyblue': #00bfff,  // 深天蓝色
          'dodgerblue': #1e90ff,    // 道奇蓝
          'mediumvioletred': #c71585, // 中紫罗兰红
          'limegreen': #32cd32,     // 酸橙绿
          'mediumseagreen': #3cb371, // 中海绿色
          'mediumslateblue': #7b68ee, // 中板岩蓝
          'mediumturquoise': #48d1cc, // 中绿松石色
          'mediumspringgreen': #00fa9a, // 中春绿色
          'mediumaquamarine': #66cdaa, // 中碧绿色
          'mediumblue': #0000cd,     // 中蓝色
          'midnightblack': #191970,  // 午夜黑
          'mediumorchid': #ba55d3,   // 中紫色
          'darkgoldenrod': #b8860b,  // 深金菊色
          'crimson': #dc143c,        // 深红色
          'darkred': #8b0000,        // 深红色
          'darkorange': #ff8c00,     // 深橙色
          'darkorchid': #9932cc,     // 深紫色
  );
  $color-black: map.get($colors, 'black');
  --el-color-black: #{$color-black};
  @each $type in (primary, success, warning, danger, error, info) {
    $color: map.get($colors, $type);
    --el-color-#{$type}: #{$color};
    @each $i in (3, 5, 7, 8,9) {
      $weight: math.percentage(math.div($i, 10));
      $value: mix($el-bg, $color, $weight);
      --el-color-#{$type}-light-#{$i}: #{$value};
    }
    --el-color-#{$type}-dark-2: #{mix(#ffffff, $color, math.percentage(math.div(2, 10)))};
  }
}